<template>
  <div class="tablefather">
    <dt-table
      ref="resourceTable"
      v-loading="loading"
      :table-opts="tableOpts"
      :is-column-search="false"
      :pagination-data="{
        total: total,
        queryParams: filterForm
      }"
      @pagination="pagination"
      @searchReset="handleReset"
      @searchChange="handleQuery"
      @selection-change="handleSelectionChange"
    />
    <associatedInterface ref="associationRef" />
  </div>
</template>
<script>
import associatedInterface from './associatedInterface.vue'
import interfacePermissionApi from '@/framework/api/authCenter/interfacePermission/interfacePermission'

export default {
  dicts: ['sex', 'user_status'],
  components: { associatedInterface },
  props: {
    menuBtnInfo: {
      type: Object,
      default: () => {}
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 总条数
      total: 0,
      // 用户组织机构关联表格数据
      list: [],
      // 查询参数
      filterForm: {
        pageNo: 1,
        pageSize: 10,
        parentId: '',
        level: 0,
        // appId: '',
        resourceName: ''
      },
      tableOpts: {
        rowKey: 'resourceId',
        tableData: [],
        customSearch: [{
        }],
        // 表格第一列
        firstTableCol: {
          select: true,
          width: 55,
          type: 'selection'
        },
        toolbarBtn: [
          {
            label: '关联接口',
            type: 'primary',
            permission: ['INTERFACEPERMISSION_ADD_BUTTON'],
            click: () => {
              this.association()
            }
          },
          {
            label: '批量解除',
            type: '',
            permission: ['INTERFACEPERMISSION_DELMORE_BUTTON'],
            click: () => {
              this.disassociationMore()
            }
          }
        ],
        tableCol: [
          {
            prop: 'resourceName',
            label: '接口名',
            show: true,
            align: 'left',
            search: true
          },
          {
            prop: 'resourceUrl',
            label: 'URL',
            align: 'left',
            show: true
          },
          {
            prop: 'httpMethod',
            label: '请求方式',
            align: 'left',
            show: true
          }
        ],
        operator: {
          width: 115,
          align: 'left',
          operatorBtn: [
            {
              text: '解除关联',
              permission: ['INTERFACEPERMISSION_DEL_BUTTON'],
              size: 'small',
              click: (row, col, cellValue) => { return this.disassociation(row) }
            }
          ]
        }
      },
      multipleSelection: []
    }
  },
  watch: {
    // level(n, o) {
    //   if (n === 2 || n === 3) { // 1应用 2菜单 3按钮
    //     this.getList()
    //   }
    // }
    id(n, o) {
      if (this.menuBtnInfo.level === 2 || this.menuBtnInfo.level === 3) {
        this.getList()
      }
    }
  },
  created() {
    // this.getList()
  },
  methods: {
    // 多选框选中数据
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    getList() {
      this.loading = true
      this.filterForm.parentId = this.menuBtnInfo.id
      this.filterForm.level = this.menuBtnInfo.level
      // this.filterForm.appId = this.menuBtnInfo.appId // 所属应用的id
      interfacePermissionApi.getApiResource(this.filterForm).then((res) => {
        this.tableOpts.tableData = res.data.rows
        this.total = res.data.totalRows
        this.loading = false
      })
    },
    /** 搜索按钮操作 */
    handleQuery(formModel) {
      this.filterForm = { ...this.filterForm, ...formModel }
      // this.$refs.resourceTable.clearSelection()
      this.filterForm.pageNo = 1
      this.getList()
    },
    /** 重置按钮操作 */
    handleReset() {
      this.filterForm = {
        pageNo: 1,
        pageSize: 10,
        parentId: '',
        level: 0,
        // appId: '',
        resourceName: ''
      }
      this.handleQuery()
    },
    pagination() {
      this.getList(this.filterForm)
    },
    // 关联association
    association() {
      this.$refs.associationRef.openApi(this.menuBtnInfo)
    },
    // 批量解除
    disassociationMore() {
      const that = this
      if (!that.multipleSelection || that.multipleSelection.length === 0) {
        that.$dtMessage({
          title: '失败',
          message: '请先选择要批量处理的数据',
          type: 'error',
          duration: 2000
        })
        return
      }
      const menuResourceIdList = that.multipleSelection.map((res) => {
        return res.menuResourceId
      })
      const resourceNames = that.multipleSelection.map((res) => {
        return res.resourceName
      })
      that.$dtModal.confirm(`是否确认解除“${resourceNames}”?`).then(() => {
        const params = {
        // type: 0, // 1关联接口 0解除关联
        // appId: that.menuBtnInfo.appId, // 所属应用的id
        // boundId: that.menuBtnInfo.boundId, // 被绑定的菜单/按钮id
        // boundType: that.menuBtnInfo.type, // 被绑定的标的类型 1菜单 2 按钮 3三方
          menuResourceIdList // 接口id集合[]
        }
        interfacePermissionApi.unrelateApi(params).then(() => {
          that.$dtMessage({
            type: 'success',
            message: '批量解除成功'
          })
          // this.$refs.resourceTable.clearSelection()
          that.getList()
        })
      })
    },
    // 解除关联
    disassociation(row) {
      const that = this
      this.$dtModal.confirm(`是否确认解除关联“${row.resourceName}”?`).then(() => {
        const menuResourceIdList = []
        menuResourceIdList.push(row.menuResourceId)
        const params = {
          // type: 0, // 1关联接口 0解除关联
          // appId: that.menuBtnInfo.appId, // 所属应用的id
          // boundId: that.menuBtnInfo.boundId, // 被绑定的菜单/按钮id
          // boundType: that.menuBtnInfo.type, // 被绑定的标的类型 1菜单 2 按钮 3三方
          menuResourceIdList // 接口id集合[]
        }
        return interfacePermissionApi.unrelateApi(params)
      }).then(() => {
        this.$dtMessage({
          type: 'success',
          message: '解除成功'
        })
        this.getList()
      })
    }
  }
}
</script>
<style scoped lang="scss">
</style>
